<template>
  <div class="dragon">
    <el-col class="tit">
      <el-col tag="strong" :span="2">端午活动</el-col>
      <el-button type="edit" size="small" @click="looklist">{{listflag?'查看发货列表':'查看二维码'}}</el-button>
    </el-col>
    <el-col v-show="listflag">
      <el-col>
        <el-form :model="form" ref="form" :inline="true" size="small" label-width="140px">
          <el-form-item label="活动赠送份数：">
            <el-input v-model="form.number" placeholder="请输入活动份数"></el-input>
          </el-form-item>
          <el-form-item label="活动结束时间：">
            <el-date-picker v-model="form.exp" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="onSubmit">立即创建</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col class="center">
        <el-table :data="datalist" size="small" border stripe>
          <el-table-column
            v-for="col in columns"
            :prop="col.id"
            :key="col.id"
            :label="col.label"
            :width="col.width"
          ></el-table-column>
          <el-table-column label="二维码">
            <template slot-scope="scope">
              <!-- <a :href="scope.row.qr_code"  download="海报" rel="noopener noreferrer"> -->
              <img :src="scope.row.qr_code" alt class="imgsda" title="右键保存" />
              <!-- </a> -->

              <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              <template v-if="scope.row.status==1">已使用</template>
              <template v-if="scope.row.status==0">待使用</template>
              <template v-if="scope.row.status==2">已禁用不可启用</template>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.status==1"
                size="mini"
                type="danger"
                @click="handleDelete(scope.row,'no')"
              >禁用</el-button>
              <el-button
                v-if="scope.row.status==0"
                size="mini"
                type="success"
                @click="handleDelete(scope.row,'yes')"
              >使用</el-button>

              <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <el-col>
          <el-pagination
            ref="pagination"
            layout="prev, pager, next"
            :total="total2"
            @current-change="handleCurrentChange2"
            :page-size="10"
            class="page_center"
          ></el-pagination>
        </el-col>
      </el-col>
    </el-col>
    <el-col v-show="!listflag">
      <el-table :data="comlist" border stripe>
        <el-table-column
          v-for="col in columns2"
          show-overflow-tooltip
          :prop="col.id"
          :key="col.id"
          :label="col.label"
          :width="col.width"
        ></el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <template v-if="scope.row.status==1">已发货</template>
            <template v-if="scope.row.status==0">已取消发货</template>
            <template v-if="scope.row.status==2">待处理</template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button v-show='scope.row.status==2' type="primary" size="mini" @click="edit_com(scope.row,'yes')">发货</el-button>
            <el-button v-show='scope.row.status==2' type="error" size="mini" @click="edit_com(scope.row,'no')">不发货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col>
        <el-pagination
          :hide-on-single-page="pagelang"
          ref="pagination"
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
          :page-size="15"
          class="page_center"
        ></el-pagination>
      </el-col>
    </el-col>
  </div>
</template>
<script>
// import mergeImages from "merge-images";
// import src from '../../assets/90.jpg'
export default {
  name: "",
  data() {
    return {
      pagelang: false,
      form: {
        number: "",
        exp: ""
      },
      datalist: [],
      total2: 0,
      total: 0,
      columns: [
        {
          id: "id",
          label: "编号",
          width: 50
        },
        {
          id: "expiration",
          label: "有效时间",
          width: 150
        },
        {
          id: "gifts_code",
          label: "兑换编号",
          width: 150
        },
        {
          id: "is_use",
          label: "兑换状态",
          width: 150
        }
        // {
        //   id: "status",
        //   label: "当前状态",
        //   width: 100
        // }
      ],
      page: 1,
      listflag: true,
      comlist: [],
      page2: 1,
      columns2: [
        {
          id: "id",
          label: "编号",
          width: 50
        },
        {
          id: "created_at",
          label: "发货时间",
          width: 200
        },
        {
          id: "address",
          label: "地址"
        },
        {
          id: "name",
          label: "联系人"
        },
        {
          id: "phone",
          label: "联系电话"
        },
        // {
        //   id: "status",
        //   label: "状态",
        //   width: 280
        // }
      ]
    };
  },
  mounted() {
    this.qrcode_list(this.page);
  },
  methods: {
    async onSubmit() {
      if (this.form.exp && this.form.number) {
        let res = await this.$store.dispatch("cre_gift_code", this.form);
        if (!res.code) {
          this.$message({
            type: "success",
            message: "创建成功"
          });
          this.qrcode_list();
        }
      } else {
        this.$message.error("请填写完整");
      }
    },
    async qrcode_list(page) {
      let data = {
        page: page
      };
      let res = await this.$store.dispatch("qrcode_list", data);
      if (!res.code) {
        this.datalist = res.data.data;
        this.total2 = res.data.total;
      }
    },
    handleCurrentChange2(e) {
      this.page = e;
      this.qrcode_list(this.page);
    },
    handleCurrentChange(e) {
      this.page2 = e;
      this.getcomlist(this.page2);
    },
    async handleDelete(row, type) {
      let data = {
        id: row.id,
        status: type
      };
      let res = await this.$store.dispatch("qrcode_use_status", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "操作成功"
        });
        this.qrcode_list(this.page);
      }
    },
    looklist() {
      this.listflag = !this.listflag;
      if (this.listflag) {
        this.qrcode_list(this.page);
      } else {
        this.getcomlist(this.page2);
      }
    },
    async getcomlist(e) {
      let data = {
        page: e
      };
      let res = await this.$store.dispatch("gifts_good_list", data);

      if (!res.code) {
        this.comlist = res.data.data;
        this.total = res.data.total;
      }
    },
    dowlode(path) {
      this.downloadImage(path);
      //   let link = document.createElement("a");
      // link.style.display = "none";
      // link.setAttribute("download", ".png");
      // link.href = path;
      // document.body.appendChild(link);
      // link.click();
    },
    downloadImage() {
      // const src = path
      // var fileName = this.getFileName(path)
      // var canvas = document.createElement('canvas')
      // var img = document.createElement('img')
      // img.onload = function(e) {
      //   console.log(e);
      //   canvas.width = img.width
      //   canvas.height = img.height
      //   var context = canvas.getContext('2d')
      //   context.drawImage(img, 0, 0, img.width, img.height)
      //   canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height)
      //   canvas.toBlob((blob) => {
      //     const link = document.createElement('a')
      //     link.href = window.URL.createObjectURL(blob)
      //     link.download = fileName
      //     link.click()
      //   }, 'image/jpeg')
      // }
      // img.setAttribute('crossOrigin', 'Anonymous')
      // img.src = src
    },
    getFileName(url) {
      var urlSlashCount = url.split("/").length;
      return url.split("/")[urlSlashCount - 1].toLowerCase();
    },
    async edit_com(row, type) {
      this.$confirm("确定向" + row.name + "发货吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '删除成功!'
          // });
          this.postcomdata(row, type);
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });
    },
    async postcomdata(row, type) {
      let data = {
        id: row.id,
        status: type
      };
      let res = await this.$store.dispatch("edit_good_status", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "操作成功"
        });
        this.getcomlist(this.page2);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.dragon {
  background-color: #f8f8f8;
  padding: 30px;
  text-align: left;
  .center {
    text-align: left;
  }
}
.imgsda {
  width: 375px;
  height: 250px;
}
.tit {
  padding: 30px;
  display: flex;
  align-items: center;
}
.page_center{
  margin:24px 0px 64px;
}
</style>